<template>
  <div class="flex flex-col min-h-screen w-full bg-gray-50" style="width:100vw;max-width:100vw;">
    <!-- 工具栏区 -->
    <header class="w-full flex-shrink-0">
      <slot name="toolbar"></slot>
    </header>
    <!-- 主体区：左右分栏 -->
    <main class="flex flex-1 w-full max-w-none" style="width:100vw;max-width:100vw;">
      <!-- 输入区 -->
      <section class="flex-1 min-w-0 p-6 border-r border-gray-200 bg-white w-full" style="width:100%;max-width:100vw;">
        <slot name="input"></slot>
      </section>
      <!-- 展示区 -->
      <section class="flex-1 min-w-0 p-6 bg-gray-50 w-full" style="width:100%;max-width:100vw;">
        <slot name="output"></slot>
      </section>
    </main>
    <!-- 底部提示区 -->
    <footer class="w-full py-3 px-6 bg-white border-t border-gray-200 text-sm text-gray-500">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang="ts">
// 仅布局，无业务逻辑
</script>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({ name: 'ToolLayout' });
</script>

<style>
html, body, #app {
  width: 100vw;
  max-width: 100vw;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
</style> 